
import {Row,Col,Form,Input,Button,Typography,  Select } from "antd" 
import { UploadOutlined } from '@ant-design/icons';
import myinfo from "../../mobx/info";
import { useRef, useState } from "react";
import { annoTypeList, toast } from "../../utils/commom";
import { baseURL } from "../../api/request";
import { ajax } from "../../api";
import { values } from "mobx";

const {Title} = Typography

export default function Addstudent({history}:any) {
    const {userInfo} = myinfo
    const [imgSrc, setimgSrc] = useState<any>(null)
    const [form] = Form.useForm()
    const ufile:any = useRef()
    const onFinish =async (v:any)=>{
        v.userInfo = userInfo
        let {code}:any = await ajax.addanno(v)
        if(code==200){
            history.push('/main/anno/list')
        }
    }

    const onFinishFailed = ()=>{
        toast.error('请输入有效的公告信息')
    }
    const startUploadeFile =async ()=>{
        const file = ufile.current.files[0]
        const data = new FormData()
        data.append('file',file)
        let {code,path}:any = await ajax.uploadfile(data)
        if(code==200){
            setimgSrc(path)
            form.setFieldsValue({desc:path})
        }
    }
    const handleClickUpload = ()=>{
        ufile.current.click()
    }
    return (
    
        <div>
          <Title>添加公告</Title>
          <Row>
              <Col>
              <Form
               name="basic"
               labelCol={{ span: 24 }}
               wrapperCol={{ span: 24 }}
               initialValues={{
                       password:"qwe123"
                   }}
               onFinish={onFinish}
               onFinishFailed={onFinishFailed}
               autoComplete="off"
               form={form}
              >
                 <Form.Item
                    label="公告标题"
                    name="title"
                    rules={[{ required: true, message: '请输入公告标题!' }]}
                    >
                    <Input   placeholder="请输入公告标题" />
                </Form.Item>

                <Form.Item
                    label="公告内容"
                    name="content"
                    rules={[{ required: true, message: '请输入公告内容!' }]}
                    >
                    <Input.TextArea   placeholder="请输入公告内容" />
                </Form.Item>

                <Form.Item
                    label="公告描述"
                    name="desc"
                    rules={[{ required: true, message: '请上传公告图片!' }]}
                    >
                  <input type="file"  ref={ufile} style={{display:"none"}}  onChange={startUploadeFile}  />
                   <Button  onClick={handleClickUpload} type="primary">{imgSrc?'替换':'上传'}公告描述图片</Button>
                   {
                       imgSrc && <img src={imgSrc.replace(/public/,baseURL)} alt="" style={{width:'100%',height:180,borderRadius:"6px",margin:"10px 0"}}/>
                   }
                </Form.Item>

                <Form.Item
                    label="公告类型"
                    name="type"
                    rules={[{ required: true, message: '请选择公告类型!' }]}
                    >
                   <Select placeholder="请选择公告类型">
                     {
                        annoTypeList.map((item,index)=>(
                            <Select.Option key={index} value={item.value}>
                                {item.text}
                            </Select.Option>
                        )) 
                     }
                   </Select>
                </Form.Item>
                <Form.Item >
                            <Row>
                                <Col span={24} >
                                    <Button danger block htmlType="submit"  > 添加公告 </Button>
                                </Col>
                            </Row>
                        </Form.Item>
              </Form>
              </Col>
          </Row>
        </div>
    )
}
